<template>
	<view class="password">
		<view class="content">
			<view class="welcome">
				<view class="text">
					<view>
						Hi~
					</view>
					<view>
						停简单欢迎您
					</view>
				</view>
				<view class="img">
					<image src="../../static/image/login-pic.png"></image>
				</view>
			</view>
			<view class="form">
				<u-form :model="form" ref="uForm" class="swiper-box">
					<u-form-item prop="password" left-icon="lock-fill" :left-icon-style="leftIconStyle">
						<u-input v-model="form.old_password" type="password" :clearable=false placeholder="请输入旧密码" />
					</u-form-item>
					<!-- 密码 -->
					<u-form-item prop="password" left-icon="lock-fill" :left-icon-style="leftIconStyle">
						<u-input v-model="form.password" type="password" :clearable=false placeholder="请输入密码" />
					</u-form-item>
					<!-- 确认密码 -->
					<u-form-item prop="passwordCon" left-icon="lock-fill" :left-icon-style="leftIconStyle">
						<u-input v-model="form.passwordCon" type="password" :clearable=false placeholder="请输入确认密码" />
					</u-form-item>
				</u-form>
				<!-- <view class="tips">
					<view class="" @click="gotoLogin">
						马上登录
					</view>
					<view class="">
						返回主页
					</view>
				</view> -->
				<!-- 确认修改	 -->
				<u-button type="primary" class="login-btn" @click="changePwd">确认修改</u-button>
			</view>

		</view>
		<!-- Toast消息提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					old_password: '',
					password: '',
					passwordCon: ''
				},

				leftIconStyle: {
					color: "#0081ff",
					fontSize: "40rpx"
				}
			}
		},
		methods: {
			changePwd() {
				if (! /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g.test(this.form.password)) {
					console.log(this.formLogin.password)
					this.$refs.uToast.show({
						position: 'top',
						title: '输入含字母和数字的6-16位密码',
						type: 'warning',
					})
					// pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,16}$/
				}
				else if (this.form.password != this.form.passwordCon) {
					this.$refs.uToast.show({
						position: 'top',
						title: '两次密码不一致',
						type: 'warning',
					})
				} 
				
				
				else {
					this.$u.api.changePwd({
						old_password: this.form.old_password,
						new_password: this.form.password
					}).then(res => {
						console.log(res)
						// 密码修改成功
						if (res.meta.status == 200) {
							this.$refs.uToast.show({
								position: 'top',
								title: res.meta.message,
								type: 'success',
							})
							// 跳转登录
							setTimeout(() => {
								this.$u.route('/pages/public/loginRegister')
							}, 2000)
						}
						// 原密码不正确
						else {
							this.$refs.uToast.show({
								position: 'top',
								title: res.meta.message,
								type: 'warning',
							})
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.password {
		.content {
			width: 100%;
			.welcome {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				height: 460rpx;
				width: 100%;
				background-color: $base-color;

				.text {
					color: #FFFFFF;
					font-size: 50rpx;
					margin: 0 0 110rpx 40rpx;
				}

				.img {
					image {
						width: 220rpx;
						height: 270rpx;
					}

					margin: 0 40rpx 80rpx 0;
				}
			}

			.form {
				height: 1150rpx;
				margin: -60rpx 20rpx 0 20rpx;
				background-image: url(../../static/image/login-bg.png);
				background-repeat: no-repeat;
				background-size: 100% 900rpx;

				.swiper-box {
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-content: space-around;
					width: 100%;
					height: 400rpx;
					padding: 0 50rpx 0 50rpx;
					// background-color: #007AFF;
				}

				// .tips {
				// 	display: flex;
				// 	justify-content: space-around;
				// 	color: $base-color;
				// }

				.login-btn {
					margin-top: 60rpx;
					width: 85%;
					border-radius: 30rpx;
				}
			}

		}
	}
</style>
